<template>
<div id="history-page">
 <el-tabs type="border-card">
  <el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
    <div class="list">


     <el-row>
  <el-col :span="4" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 1 : 0">
    <el-card :body-style="{ padding: '0px'}" shadow="hover">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
      <div class="bottom clearfix">
        <div class="title">海绵宝宝</div>
        <div class="time">{{currentDate}}</div>
      </div>
    </el-card>
  </el-col>



</el-row>

    </div>
  </el-tab-pane>
  <el-tab-pane label="消息中心">


<div>
  
  <el-table
  ref='mytable'
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :expand-row-keys="arra"
    @expand-change="expandAll"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

</div>




  </el-tab-pane>
  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>

</div>
  

</template>

<script>
  export default {
    data() {
      return {
      showStyle:false,
        arra:[],
        tabPosition: 'left',
        currentDate: new Date().getMonth(),
         tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
           children: [{
              id: 36,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 35,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 33,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 34,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
           children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      };
    },
    methods:{

      
      
    forArr(arr, isExpand) {
  arr.forEach(i => {
    this.$refs.mytable.toggleRowExpansion(i, isExpand)
  })
},
expandAll() {
  let els = document.getElementsByClassName('el-table__row el-table__row--level-1')
  for(let i=0;i<els.length;i++){
    els[i].style.display='none'
  }
  
  let buttons =document.getElementsByClassName('el-table__expand-icon--expanded')
  for(let i=0;i<buttons.length;i++){
    buttons[i].click();
   
    console.log(buttons[i])
  }

 


  console.log(els)
},


       load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      }
    }
    
  }
</script>

<style scoped>
#history-page{
  margin: 20px 20px;
  
}
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    padding-left: 10px;
    margin-top: 13px;
    line-height: 12px;
    padding-bottom: 10px;
  }
  .title{
    margin-bottom: 8px;
  }
  .title:hover{
   color: #409EFF;
   cursor: pointer;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>